<template>
  <div class="fenpei">
    <div class="fenpeis">
      <el-button type="primary" @click="fanhui"> 返回 </el-button>
      <el-button type="primary" @click="fenpei">
        分配
        <i class="el-icon-plus el-icon--right"></i>
      </el-button>
      <el-input
        placeholder="搜索"
        v-model="project_name"
        class="input-with-select"
        style="width: 300px"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="award_split"
        ></el-button>
      </el-input>
      <!-- <div>
        <el-select
          v-model="type_id"
          placeholder="请选择类型"
          @change="award_split"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.com_type"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-select
          v-model="com_id"
          placeholder="请选择企业"
          @change="award_split"
        >
          <el-option
            v-for="item in option"
            :key="item.id"
            :label="item.com_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-select
          v-model="award_id"
          placeholder="请选择奖项"
          @change="award_split"
        >
          <el-option
            v-for="item in options1"
            :key="item.id"
            :label="item.award_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div> -->
      <!-- <el-button type="primary">
        导出
        <i class="el-icon-plus el-icon--right"></i>
      </el-button> -->
    </div>
    <div class="tables">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :height="tableHeight"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" label="序号">
          <template scope="scope">
            <span>{{ (page - 1) * 15 + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="id" label="申报id"> </el-table-column>
        <el-table-column prop="award_name" label="类别">
          创新成果奖</el-table-column
        >
        <el-table-column prop="type_name" label="类型"> </el-table-column>
        <el-table-column prop="project_name" label="名称" width="400">
        </el-table-column>
        <el-table-column prop="com_name" label="申报单位" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="user_name" label="申请人" show-overflow-tooltip>
        </el-table-column>
        <!-- <el-table-column prop="user_name" label="申请人" show-overflow-tooltip>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="fenye">
      <el-pagination
        layout="prev, pager, next"
        :total="num_page"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  award_split,
  award_split_create,
  typeApi,
  user_select,
  award_find,
} from "../axios/api";
export default {
  data() {
    return {
      centerDialogVisible: false,
      award_id: "",
      num_page: 0,
      com_name: "",
      com_id: "",
      project_name: "",
      tableHeight: "400px",
      id: this.$route.query.id,
      page: 1,
      type_id: "",
      tableData: [],
      tableDatas: [],
      multipleSelection: [],
      options: [],
      option: [],
      options1: [],
    };
  },
  beforeDestroy() {
    // 由于window.onresize是全局事件，在其他页面改变界面时也会执行，这样可能会出现问题，需要在离开这个界面时注销window.onresize事件
    window.onresize = null;
  },
  created() {
    this.award_split();
    this.typeApi();
    this.user_select();
    this.award_find();
  },
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.setTableHeight();
      // 监听窗口大小变化
      window.onresize = () => {
        this.setTableHeight();
      };
    });
  },
  methods: {
    setTableHeight() {
      this.tableHeight =
        window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 45;
      console.log("this.tableHeight");
      console.log(this.tableHeight);
    },
    award_find() {
      award_find().then((res) => {
        this.options1 = res.data.data;
      });
    },
    user_select() {
      user_select().then((res) => {
        this.option = res.data.data;
      });
    },
    typeApi() {
      typeApi().then((res) => {
        console.log(res);
        this.options = res.data.data;
        console.log(this.options);
      });
    },
    award_split() {
      let aaa = {
        page: this.page,
        fz_id: "-1",
        token: sessionStorage.getItem("Token1"),
        project_name: this.project_name,
      };
      award_split(aaa).then((res) => {
        console.log(res);
        this.tableData = res.data.data.data;
        this.num_page = res.data.data.total;
      });
    },
    fanhui() {
      this.$router.push({ path: "/fenzu" });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.award_split();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    fenpei() {
      let arr = [];
      if (this.multipleSelection) {
        this.multipleSelection.forEach((item) => {
          arr.push(item.id);
        });
      }
      let aaa = {
        split_id: arr,
        fz_id: localStorage.getItem("idse"),
        token: sessionStorage.getItem("Token1"),
      };
      award_split_create(aaa).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "分配成功",
            type: "success",
          });

          this.award_split();
        } else {
          this.$message({
            message: res.data.msg,
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.fenpei {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.fenpeis {
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  align-items: center;
}
.fenpeis > div {
  margin: 0 10px;
}
.tables {
  width: 90%;
  /* height: 80%; */
  margin: 0 auto;
  /* overflow: scroll; */
}
.fenye {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>